<template>
    <div>
        <!-- 锚点导航区域 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <!-- <el-breadcrumb-item>
          <a href="#/home">首页</a>
        </el-breadcrumb-item>-->
            <el-breadcrumb-item>订单管理</el-breadcrumb-item>
            <el-breadcrumb-item>订单列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片视图 -->
        <el-card class="box-card">
            <!-- 顶部搜索区域 -->
            <div slot="header" class="clearfix">
                <el-row :gutter="10">
                    <el-col :span="6">
                        <el-input placeholder="请输入内容" v-model="param.query" clearable @clear="getListDate">
                            <el-button slot="append" icon="el-icon-search" @click="getListDate"></el-button>
                        </el-input>
                    </el-col>
                </el-row>
            </div>

            <!-- 订单表格区域 -->
            <el-table :data="orderList" border stripe>
                <el-table-column prop="oder_number" label="订单编号">
                </el-table-column>
                <el-table-column prop="order-price" label="订单价格">
                </el-table-column>
                <el-table-column prop="order_pay" label="是否付款">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.order_pay==='1'" size="mini">已付款</el-tag>
                        <el-tag type="danger" v-else size="mini">未付款</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="is_send" label="是否发货"></el-table-column>
                <el-table-column prop="create_time" label="下单时间">
                    <template slot-scope="scope">
                        {{ scope.row.create_time | dateFormat }}
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <!-- 编辑 -->
                        <el-button type="primary" size="mini" icon="el-icon-edit" @click="editAddressBtn"></el-button>
                        <!-- 查看物流信息 -->
                        <el-button type="danger" size="mini" icon="el-icon-location-information"
                            @click="lookProgressBtn"></el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页区域 -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="param.pagenum" :page-sizes="[5, 10, 15]" :page-size="param.pagenum"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </el-card>

        <!-- 编辑修改地址的dialog -->
        <el-dialog title="修改地址" :visible.sync="editAddressDialogVisible" width="50%" @close="editAddressDialogClose">
            <!-- 编辑表单区域 -->
            <el-form :model="editAddressForm" :rules="editAddressFormRules" ref="editAddressFormRef"
                label-width="100px">
                <el-form-item label="省市区/县" prop="address1">
                    <!-- 级联选择地址 -->
                    <el-cascader v-model="editAddressForm.address1" :options="cityData"></el-cascader>
                </el-form-item>
                <el-form-item label="详细地址" prop="address2">
                    <el-input v-model="editAddressForm.address2"></el-input>
                </el-form-item>
            </el-form>
            <!-- 底部区域 -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="editAddressDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="editAddressDialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 显示物流进度的dialog -->
        <el-dialog title="物流进度" :visible.sync="progressVisible" width="50%" @close="progressDialogClose">
            <!-- 展示物流进度区域--时间线 -->
            <el-timeline :reverse="reverse">
                <el-timeline-item v-for="(activity, index) in processArr" :key="index" :timestamp="activity.time">
                    {{activity.context}}
                </el-timeline-item>
            </el-timeline>
        </el-dialog>

    </div>
</template>

<script>
    // 引入地址文件
    import cityData from './citydata.js'

    // @import '../../../plugins/timeline/timeline.css';
    // @import '../../../plugins/timeline-item/timeline-item.css';

    export default {
        // 组件名称
        name: 'demo',
        // 组件参数 接收来自父组件的数据
        props: {},
        // 局部注册的组件
        components: {},
        // 组件状态值
        data() {
            return {
                //获取订单列表的参数
                param: {
                    query: '',
                    pagenum: 5,
                    pagenum: 1
                },
                //订单列表数据
                orderList: [],
                total: 0,
                editAddressDialogVisible: false,
                editAddressForm: {
                    //多级联动 是数组
                    address1: [],
                    address2: ''
                },
                editAddressFormRules: {
                    address1: [
                        { required: true, message: "请选择省市区/县" }
                    ],
                    address2: [
                        { required: true, message: "请输入详细地址", trigger: 'blur' }
                    ]
                },
                cityData,
                progressVisible: false,
                reverse: true,
                activities: [{
                    content: '活动按期开始',
                    timestamp: '2018-04-15'
                }, {
                    content: '通过审核',
                    timestamp: '2018-04-13'
                }, {
                    content: '创建成功',
                    timestamp: '2018-04-11'
                }],
                //获取的快递进度信息
                processArr: []
            }
        },
        // 计算属性
        computed: {},
        // 侦听器
        watch: {},
        // 组件方法
        methods: {
            //获取订单列表
           /*async*/ getListDate() {
                // const { data: res } = await this.$http.get('order', { params: this.param });

                //假数据
                const res = {
                    "data": {
                        "total": 5,
                        "pagenum": 1,
                        "goods": [
                            {
                                "order_id": 47,
                                "user_id": 133,
                                "oder_number": "hairuil-01",
                                "order-price": 322,
                                "order_pay": "1",
                                "is_send": "是",
                                "trade_no": "",
                                "order_fapiao_title": "个人",
                                "order_fapiao_company": "",
                                "order_fapiao_content": "办公用品",
                                "consignee_address": "地址",
                                "pay_status": "1",
                                "create_time": 1507889876,
                                "update_time": 1507889876
                            },
                            {
                                "order_id": 48,
                                "user_id": 134,
                                "oder_number": "hairuil-02",
                                "order-price": 322,
                                "order_pay": "0",
                                "is_send": "是",
                                "trade_no": "",
                                "order_fapiao_title": "个人",
                                "order_fapiao_company": "",
                                "order_fapiao_content": "办公用品",
                                "consignee_address": "地址",
                                "pay_status": "1",
                                "create_time": 1507889870,
                                "update_time": 1507889878
                            },
                            {
                                "order_id": 49,
                                "user_id": 135,
                                "oder_number": "hairuil-03",
                                "order-price": 322,
                                "order_pay": "1",
                                "is_send": "是",
                                "trade_no": "",
                                "order_fapiao_title": "个人",
                                "order_fapiao_company": "",
                                "order_fapiao_content": "办公用品",
                                "consignee_address": "地址",
                                "pay_status": "1",
                                "create_time": 1507889876,
                                "update_time": 1507889876
                            },
                            {
                                "order_id": 50,
                                "user_id": 136,
                                "oder_number": "hairuil-04",
                                "order-price": 322,
                                "order_pay": "1",
                                "is_send": "是",
                                "trade_no": "",
                                "order_fapiao_title": "个人",
                                "order_fapiao_company": "",
                                "order_fapiao_content": "办公用品",
                                "consignee_address": "地址",
                                "pay_status": "1",
                                "create_time": 1507889876,
                                "update_time": 1507889876
                            },
                            {
                                "order_id": 51,
                                "user_id": 137,
                                "oder_number": "hairuil-05",
                                "order-price": 322,
                                "order_pay": "1",
                                "is_send": "是",
                                "trade_no": "",
                                "order_fapiao_title": "个人",
                                "order_fapiao_company": "",
                                "order_fapiao_content": "办公用品",
                                "consignee_address": "地址",
                                "pay_status": "1",
                                "create_time": 1507889876,
                                "update_time": 1507889876
                            }
                        ]
                    },
                    "meta": {
                        "status": 200,
                        "message": "获取成功！"
                    }
                }

                if (res.meta.status !== 200) return this.$message.error("订单列表数据获取失败！")
                this.$message.success("订单列表数据获取成功！")

                //数据获取成功
                this.orderList = res.data.goods
                this.total = res.data.total

                console.log(this.orderList);
            },
            //获取最新的每页几条 
            handleSizeChange(newPageSize) {
                console.log(newPageSize);
                //  this.param.pagenum = newPageSize;
                //  this.getListDate();
            },
            //获取当前点击的第几页 
            handleCurrentChange(newPageNum) {
                console.log(newPageNum);
                //  this.param.pagenum = newPageNum;
                //  this.getListDate();
            },
            //编辑修改地址的dialog关闭事件
            editAddressDialogClose() {
                //重置表单
                this.$refs.editAddressFormRef.resetFields();
            },
            //点击编辑按钮 弹出修改的dialog
            editAddressBtn() {
                this.editAddressDialogVisible = true
            },
            progressDialogClose() {

            },
            lookProgressBtn() {
                //获取物流信息
                //    const {data:res} = await this.$http.get(`/kuaidi/804909574412544580`)

                //假数据
                const res = {
                    "data": [
                        {
                            "time": "2018-05-10 09:39:00",
                            "ftime": "2018-05-10 09:39:00",
                            "context": "已签收,感谢使用顺丰,期待再次为您服务",
                            "location": ""
                        },
                        {
                            "time": "2018-05-10 08:23:00",
                            "ftime": "2018-05-10 08:23:00",
                            "context": "[北京市]北京海淀育新小区营业点派件员 顺丰速运 95338正在为您派件",
                            "location": ""
                        },
                        {
                            "time": "2018-05-10 07:32:00",
                            "ftime": "2018-05-10 07:32:00",
                            "context": "快件到达 [北京海淀育新小区营业点]",
                            "location": ""
                        },
                        {
                            "time": "2018-05-10 02:03:00",
                            "ftime": "2018-05-10 02:03:00",
                            "context": "快件在[北京顺义集散中心]已装车,准备发往 [北京海淀育新小区营业点]",
                            "location": ""
                        },
                        {
                            "time": "2018-05-09 23:05:00",
                            "ftime": "2018-05-09 23:05:00",
                            "context": "快件到达 [北京顺义集散中心]",
                            "location": ""
                        },
                        {
                            "time": "2018-05-09 21:21:00",
                            "ftime": "2018-05-09 21:21:00",
                            "context": "快件在[北京宝胜营业点]已装车,准备发往 [北京顺义集散中心]",
                            "location": ""
                        },
                        {
                            "time": "2018-05-09 13:07:00",
                            "ftime": "2018-05-09 13:07:00",
                            "context": "顺丰速运 已收取快件",
                            "location": ""
                        },
                        {
                            "time": "2018-05-09 12:25:03",
                            "ftime": "2018-05-09 12:25:03",
                            "context": "卖家发货",
                            "location": ""
                        },
                        {
                            "time": "2018-05-09 12:22:24",
                            "ftime": "2018-05-09 12:22:24",
                            "context": "您的订单将由HLA（北京海淀区清河中街店）门店安排发货。",
                            "location": ""
                        },
                        {
                            "time": "2018-05-08 21:36:04",
                            "ftime": "2018-05-08 21:36:04",
                            "context": "商品已经下单",
                            "location": ""
                        }
                    ],
                    "meta": { "status": 200, "message": "获取物流信息成功！" }
                }

                
                if (res.meta.status !== 200) {
                    return this.$message.error("快递信息获取失败！")
                }
                this.$message.success("快递信息假数据获取成功！")

                this.processArr = res.data;
                this.progressVisible = true;
            }

        },
        // 以下是生命周期钩子   注：没用到的钩子请自行删除
        /**
        * 在实例初始化之后，组件属性计算之前，如data属性等
        */
        beforeCreate() {
        },
        /**
        * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
        */
        created() {
            //获取订单列表
            this.getListDate();
        },
        /**
        * 在挂载开始之前被调用：相关的 render 函数首次被调用。
        */
        beforeMount() {
        },
        /**
        * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
        * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
        */
        mounted() {
        },
        /**
        * 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
        * 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
        */
        beforeUpdate() {
        },
        /**
        * 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
        * 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
        */
        updated() {
        },
        /**
        * keep-alive 组件激活时调用。 仅针对keep-alive 组件有效
        */
        activated() {
        },
        /**
        * keep-alive 组件停用时调用。 仅针对keep-alive 组件有效
        */
        deactivated() {
        },
        /**
        * 实例销毁之前调用。在这一步，实例仍然完全可用。
        */
        beforeDestroy() {
        },
        /**
        * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
        * 所有的事件监听器会被移除，所有的子实例也会被销毁。
        */
        destroyed() {
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style scoped lang="less">
    .el-cascader {
        width: 100%;
    }
</style>